<template>
	<view style="width: 500rpx; height: 500rpx;">
		<l-echart ref="chartRef" :options="options" style="width: 100%; height: 100%;"></l-echart>
	</view>
</template>

<script setup>
	import {
		watch,
		ref,
		onMounted
	} from 'vue';
	// const echarts = require('../../uni_modules/lime-echart/static/echarts.min');

	const props = defineProps({
		options: Object,
		echarts: Object
	})

	watch(() => props.options, (nv) => {
		setTimeout(async () => {
			if (!chartRef.value) return
			const myChart = await chartRef.value.init(props.echarts)
			console.log(myChart)
			myChart.setOption()
		}, 1000)
	}, {
		deep: true
	})

	const chartRef = ref(null)
	onMounted(() => {
		setTimeout(async () => {
			if (!chartRef.value) return
			const myChart = await chartRef.value.init(props.echarts)
			console.log(myChart)
			myChart.setOption(props.options)
		}, 1000)
	})
</script>

<style>

</style>